<!-- 商品详情 -->
<template>
  <div class="detailContaner">
    <div class="header">
      <div class="iconfont icon-huitui" @click="goback"></div>
      <div>商品详情</div>
      <div class="rightHeader">
        <div class="shoppingIcon" @click="toShoppingCart">
          <span class="iconfont icon-gouwuchekong"></span>
          <span class="shoppingCount">{{ shoppingCount }}</span>
        </div>
        <span class="toHome" @click="toHome">跳转首页</span>
      </div>
    </div>
    <div class="main">
      <v-album :goodsimage="goodsimage" />
      <v-info
        :goodsname="goodsname"
        :concatway="concatway"
        :curprice="curprice"
        :goodsnum="goodsnum"
        :preprice="preprice"
        :info="info"
      />
    </div>
    <v-tabs :goodsdesc="goodsdesc" />
  </div>
</template>

<script>
import albumVue from "./album.vue";
import tabsVue from "./tabs.vue";
import goodsInfoVue from "./goodsInfo.vue";
import { getOnlyGoodsData } from "@/utils/api";
import { mapState } from "vuex";
export default {
  components: {
    "v-album": albumVue,
    "v-info": goodsInfoVue,
    "v-tabs": tabsVue,
  },
  computed: {
    isAdmin() {
      return sessionStorage.getItem("type") === "admin";
    },
    ...mapState(["shoppingCount"]),
    gid() {
      return this.$route.query.gid;
    },
  },
  data() {
    return {
      goodsname:
        "森马集团旗下棉致棒球服男潮牌宽松ins百搭学生夹克韩版潮流港风春秋痞帅炸街外套国潮男装联名 U-黑色-A43 M",
      goodsimage: ["https://urlify.cn/fqMrYn", "https://urlify.cn/v6feiq"],
      curprice: 1000,
      preprice: 2000,
      concatway: "18379996997(电话号码)",
      goodsnum: 45,
      goodsdesc: "",
      info: {},
    };
  },
  created() {
    this.getData();
  },
  methods: {
    async getData() {
      console.log(this.gid);
      let res = await getOnlyGoodsData({
        gid: this.gid,
      });
      console.log(res);
      if (res) {
        this.goodsname = res.goodsname;
        this.goodsimage = res.goodsimage.split("&");
        this.curprice = res.curprice;
        this.preprice = res.preprice;
        this.goodsnum = res.goodsnum;
        this.concatway = res.concatway;
        this.goodsdesc = res.goodsdesc
        this.info = res;
      }
    },
    goback() {
      this.$router.go(-1);
    },
    toHome() {
      this.$router.push({ path: "/home/index" });
    },
    toShoppingCart() {
      if (this.isAdmin) {
        this.$message.error("请登入学生账号，管理员账号不提供改功能！！");
        return;
      }
      this.$router.push({ path: "/home/shoppingcart" });
    },
  },
};
</script>

<style lang="less" scoped>
.detailContaner {
  .header {
    display: flex;
    justify-content: space-between;
    background: #f2f2f2;
    line-height: 30px;
    .icon-huitui {
      margin-left: 10px;
    }
    .icon-huitui:hover {
      cursor: pointer;
    }
    .rightHeader {
      display: flex;
      position: relative;

      .shoppingIcon {
        margin-right: 10px;
      }
      .shoppingCount {
        position: absolute;
        font-size: 10px;
        height: 10px;
        width: 10px;
        padding: 1px;
        border-radius: 50%;
        line-height: 10px;
        text-align: center;
        top: 2px;
        left: 8px;
        background: red;
        color: #fff;
      }
    }
    .toHome {
      margin-right: 10px;
      font-size: 12px;
      color: orangered;
    }
    .toHome:hover {
      cursor: pointer;
    }
  }
  .main {
    display: flex;
  }
}
</style>